<div class="relative flex justify-center items-center p-4">

  <a class="absolute left-2 h-12 pl-2 pr-6 py-2 justify-start items-center gap-1 inline-flex cursor-pointer"
    (click)="close()">
    <div class="p-2 font-semibold">
      <i class="ri-arrow-left-line text-text-primary"></i>
    </div>
    <p class="text-text-primary system-sm-semibold-uppercase">
      {{ 'PAC.Knowledgebase.Documents' | translate: {Default: 'Documents'} }}
    </p>
  </a>

  <ol class="lg:flex justify-center items-center w-full space-y-4 lg:space-y-0 lg:space-x-4">
    <button class="relative step flex items-center font-medium"
      [class.active]="step() === 0"
      (click)="step.set(0)"
    >
      <span class="step-num w-6 h-6 flex justify-center items-center mr-3 text-sm lg:w-8 lg:h-8"> 1 </span>
      <div class="block">
        <h4 class="text-base">
          {{ 'PAC.Knowledgebase.DocumentSource' | translate: {Default: 'Document Source'} }}
        </h4>
      </div>

      <i class="ri-arrow-right-double-line text-lg ml-2 sm:ml-4"></i>
    </button>
    <button class="relative step flex items-center font-medium disabled:cursor-not-allowed"
      [class.active]="step() === 1"
      [disabled]="!step2Avaiable()"
      (click)="step.set(1)"
    >
      <span class="step-num w-6 h-6 flex justify-center items-center mr-3 text-sm lg:w-8 lg:h-8">2</span>
      <div class="block">
        <h4 class="text-base">
          {{ 'PAC.Knowledgebase.TextProcessing' | translate: {Default: 'Text Processing'} }}
        </h4>
      </div>

      <i class="ri-arrow-right-double-line text-lg ml-2 sm:ml-4"></i>
    </button>
    <button class="relative step flex items-center font-medium disabled:cursor-not-allowed"
      [class.active]="step() === 2"
      [disabled]="!step3Avaiable()"
      (click)="step.set(2)"
    >
      <span class="step-num w-6 h-6 flex justify-center items-center mr-3 text-sm lg:w-8 lg:h-8">3</span>
      <div class="block">
        <h4 class="text-base">
          {{ 'PAC.Knowledgebase.Finish' | translate: {Default: 'Finish'} }}
        </h4>
      </div>
    </button>
  </ol>
</div>

@if (step() === 0) {
  <xpert-knowledge-document-create-step-1 class="grow overflow-auto" />
}

@if (step() === 1) {
  <xpert-knowledge-document-create-step-2 class="grow overflow-auto" />
}

@if (step() === 2) {
  <xpert-knowledge-document-create-step-3 class="grow overflow-auto" />
}
